<template>
  <div class="container">
    <h3>vue+openlayers: 加载引用bing图的多种形式</h3>
    <h4>
      <el-button type="primary" size="mini" @click="bing('RoadOnDemand')">RoadOnDemand</el-button>
      <el-button type="primary" size="mini" @click="bing('Aerial')">Aerial</el-button>
      <el-button type="primary" size="mini" @click="bing('AerialWithLabelsOnDemand')">AerialWithLabelsOnDemand</el-button>
      <el-button type="primary" size="mini" @click="bing('CanvasDark')">CanvasDark</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import BingMaps from 'ol/source/BingMaps';
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
    this.bing('RoadOnDemand')
  },

  methods: {
    bing(data) {
      // 清除所有的layer
      this.map.getLayers().getArray().forEach(layer => {
        if(layer) {
          this.map.removeLayer(layer)
        }
      })

      let nsource = new BingMaps({
        key: 'AqQf9nX6PZKkFZOkdOqBOh3vg8xwGV1AYWGqC6EsOoJ0OHSUwm8CN8AhaFpT7mfR',
        imagerySet: data
      })
      let bingMapLayer = new Tile({
        source: nsource
      })
      this.map.addLayer(bingMapLayer)
    },

    initMap() {
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [],
        view: new View({
          center: [13247019,404399557, 4721671.572580107],
          zoom: 3
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>